<template>
  <RjModal
    width="600px"
    :visible="isVisible"
    @ok="onTest"
    @cancel="onCancel"
    :confirmLoading="isLoading"
    :class="[isResultVisible ? 'testing' : '']"
  >
    <div slot="title" class="title">
      {{ this.$t('ruleList.connTest') }}
      <a-tooltip :title="$t('ruleList.onlyClear')">
        <icon-font type="ic-help" />
      </a-tooltip>
    </div>
    <a-form-model
      ref="connTestFormRef"
      :model="connTestForm"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      labelAlign="left"
      :colon="false"
      :rules="formRuleObj"
    >
      <a-form-model-item
        class="form-item"
        :label="$t('common.username')"
        prop="username"
      >
        <a-input v-model="connTestForm.username" />
      </a-form-model-item>
      <a-form-model-item
        class="form-item"
        :label="$t('common.password')"
        prop="password"
      >
        <a-input-password v-model="connTestForm.password" />
      </a-form-model-item>
    </a-form-model>
    <div class="test-wrapper">
      <template v-if="isTestSuccess === true">
        <icon-font type="ic-online" class="success"></icon-font>
        <div class="remark">{{ $t('ruleList.testSuccess') }}</div>
      </template>
      <template v-else>
        <icon-font type="ic-offline" class="fail"></icon-font>
        <div class="remark">{{ $t('ruleList.testFail') }}</div>
      </template>
      <a-button type="primary" @click="onReTest">
        {{ $t('ruleList.reTest') }}
      </a-button>
    </div>
  </RjModal>
</template>

<script>
import { requestHttp, maccApi } from '@utils/index';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
// import { maccApi } from '@/utils';
// import request from '@/utils/apis/request';
export default {
  name: 'authDeviceModal',
  mixins: [authSysMixin],
  props: {},
  data() {
    return {
      isLoading: false,
      connTestForm: {
        username: '',
        password: '',
      },
      formRuleObj: {
        username: [
          {
            required: true,
            message: this.$t('common.mustEnter'),
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: this.$t('common.mustEnter'),
            trigger: 'blur',
          },
        ],
      },
      isVisible: false,
      isResultVisible: false,
      isTestSuccess: false,
    };
  },

  mounted() {},
  computed: {},
  methods: {
    onReTest() {
      this.isResultVisible = false;
      this.isTestSuccess = false;
    },
    resetForm() {
      this.connTestForm = {
        username: '',
        password: '',
      };
    },

    openModal() {
      this.isVisible = true;
    },

    // 弹窗 确认
    onTest() {
      this.$refs.connTestFormRef.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        this.testConnectivity();
      });
    },

    async testConnectivity() {
      this.isLoading = true;
      let params = { ...this.connTestForm };
      const res = await this.requestHttpAuth({
        api: maccApi.MACC_RULE_TEST_POST_API,
        method: 'POST',
        params,
      });
      this.isLoading = false;
      if (res.data.success) {
        this.isResultVisible = true;
        if (res.data.result.includes('Access-Reject')) {
          this.isTestSuccess = false;
        } else {
          this.isTestSuccess = true;
        }
      } else {
        this.$message.warning(res.data.message);
      }
    },

    // 弹窗 取消
    onCancel() {
      this.isLoading = false;
      this.resetForm();
      this.isVisible = false;

      // // 更新serverGrp配置
      // this.callbackAfterClose && this.callbackAfterClose();
    },
  },
};
</script>

<style lang="less" scoped>
@import url('@/project/authSys/assets/skin/common.less');
.testing {
  /deep/.ant-modal-footer {
    display: none;
  }
  /deep/.ant-form {
    display: none;
  }
  .test-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
}
.test-wrapper {
  display: none;
  height: 184px;
  i {
    font-size: 48px;
    &.success {
      color: @success-color;
    }
    &.fail {
      color: @error-color;
    }
  }
  .remark {
    color: #000;
  }
}
</style>
